<template>
  <div class="MyVMdPreview">
    <div class="bar">
      <div style="height: 3rem"></div>
      <van-nav-bar :fixed="true" title="文章详情" left-text="返回" left-arrow @click-left="returnPage" @click-right="editArticleInfo">
        <template #right>
          <van-icon name="add-o" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="head">
      <div class="article-title">
        {{ articleInfo.title }}
        <van-divider />
      </div>
    </div>
    <div class="article-bar-top">
      <van-row>
        <van-col span="8">作者： {{ getAuthor(articleInfo.author) }}</van-col>
        <van-col>发布时间：{{ articleInfo.releaseData }}</van-col>
      </van-row>
      <van-row>
        <van-col span="6">点赞：{{ articleInfo.likeNum }}</van-col>
        <van-col span="6">收藏：{{ articleInfo.shareNum }}</van-col>
        <van-col span="6">转发：{{ articleInfo.collectNum }}</van-col>
      </van-row>
      <div class="tag-class">
        <van-row>
          <van-col
            ><van-tag type="primary" v-for="tag in articleInfo.tagNames" :key="tag.id">{{ tag.tagName }}</van-tag></van-col
          >
        </van-row>
      </div>
    </div>
    <div class="context">
      <v-md-editor :value="articleInfo.context" mode="preview"></v-md-editor>
    </div>
    <div class="down">
      <van-row type="flex" justify="center">
        <van-col span="6"><van-button round color="linear-gradient(to right, #0ec0d7, #3296fa)" :icon="goodJob" @click="goodClick"></van-button></van-col>
        <van-col span="6"><van-button round color="linear-gradient(to right, #0ec0d7, #3296fa)" :icon="share" @click="shareClick"></van-button></van-col>
        <van-col span="6"><van-button round color="linear-gradient(to right, #0ec0d7, #3296fa)" :icon="star" @click="starClick"></van-button></van-col>
      </van-row>
    </div>
    <div style="height: 4rem"></div>
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" />
  </div>
</template>

<script>
import { Toast } from 'vant'
import requestApi from '@/utils/request.js'

export default {
  name: 'MyVMdPreviewComponent',
  props: {
    id: String
  },
  created() {
    this.initData()
  },
  data() {
    return {
      articleInfo: {
        title: '鸡哥跳舞',
        likeNum: 0, // 点赞
        shareNum: 0, // 转发
        collectNum: 0, // 收藏
        author: '张三',
        context:
          '## 哇 真的是你呀 哈哈 哎呀\n # 全名制作人们大家好，我是练习时长两年半的个人练习生蔡徐坤，喜欢唱、跳、rap、篮球，music\n ```javascript \n console.log("hello,world")\n```\n **Java中的原子类是如何保证线程安全的 介绍 在并发编程中，多个线程同时对共享数据进行读写操作可能会导致数据竞争和不一致的结果。为了解决这个问题，Java提供了原子类（Atomic classes），它们能够通过特定的操作确保对共享数据的原子性访问，从而保证线程安全。原子类是基于硬件的原子性操作指令或锁机制来实现的，它们提供了一种高效且线程安全的方式来执行常见的数据操作，如增加、减少、交换值等。**',
        tagNames: [
          {
            id: 1,
            tagName: 'Java'
          }
        ],
        articleCountFlag: {
          likeNumFlag: false,
          collectNumFlag: false,
          shareNumFlag: false
        },
        releaseData: '2022-02-02'
      },
      showShare: false,
      likeNumFlag: false,
      collectNumFlag: false,
      shareNumFlag: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ]
    }
  },
  computed: {
    // 点赞
    goodJob() {
      let isLikeNumFlag = false
      if (!this.isEmpty(this.articleInfo)) {
        if (!this.isEmpty(this.articleInfo.articleCountFlag)) {
          isLikeNumFlag = this.articleInfo.articleCountFlag.likeNumFlag
        }
      }

      if (isLikeNumFlag) {
        return 'good-job'
      } else {
        return 'good-job-o'
      }
    },
    // 分享
    share() {
      let isShareFlag = false
      if (!this.isEmpty(this.articleInfo)) {
        if (!this.isEmpty(this.articleInfo.articleCountFlag)) {
          isShareFlag = this.articleInfo.articleCountFlag.shareNumFlag
        }
      }
      if (isShareFlag) {
        return 'share'
      } else {
        return 'share-o'
      }
    },
    // 收藏
    star() {
      let isStarFlag = false
      if (!this.isEmpty(this.articleInfo)) {
        if (!this.isEmpty(this.articleInfo.articleCountFlag)) {
          isStarFlag = this.articleInfo.articleCountFlag.collectNumFlag
        }
      }
      if (isStarFlag) {
        return 'star'
      } else {
        return 'star-o'
      }
    }
  },
  methods: {
    initData() {
      const token = localStorage.getItem('my_token')
      const then = this
      requestApi({
        method: 'get',
        url: 'getArticleInfo',
        params: {
          id: then.id
        },
        headers: {
          // 设置请求头
          Authorization: token
        }
      })
        .then(function (response) {
          const req = response.data
          if (req.code === 0) {
            then.articleInfo = req.data
          } else {
            Toast.fail(req.msg)
          }
        })
        .catch(function (error) {
          console.log(error)
          Toast.fail('文章详情获取错误')
        })
    },
    isEmpty(obj) {
      if (typeof obj === 'undefined' || obj == null || obj === '') {
        return true
      } else {
        return false
      }
    },
    getAuthor(author) {
      if (Object.prototype.toString.call(author) === '[object String]') {
        if (author.length > 4) {
          return author.slice(0, 4) + '...'
        }
      }
      return author
    },
    // 新增文章
    editArticleInfo() {
      this.$router.push('/edit')
    },
    // 分享
    shareClick() {
      this.popularity(false, 1, '分享失败')
      this.showShare = true
    },
    returnPage() {
      this.$router.back()
    },
    // 点赞
    goodClick() {
      this.popularity(false, 0, '点赞失败')
    },
    // 收藏
    starClick() {
      this.popularity(false, 2, '收藏失败')
    },
    popularity(flag, type, failMessage) {
      if (!this.isEmpty(this.articleInfo)) {
        if (!this.isEmpty(this.articleInfo.articleCountFlag)) {
          if (type === 0) {
            flag = this.articleInfo.articleCountFlag.likeNumFlag
          } else if (type === 1) {
            flag = this.articleInfo.articleCountFlag.shareNumFlag
          } else {
            flag = this.articleInfo.articleCountFlag.collectNumFlag
          }
        }
      }
      const token = localStorage.getItem('my_token')
      const then = this
      if (flag) {
        requestApi
          .post(
            'deleteArticlePopularity',
            {
              articleInfoId: parseInt(then.id),
              endorseType: type
            },
            {
              headers: {
                // 设置请求头
                Authorization: token
              }
            }
          )
          .then(response => {
            const req = response.data
            if (req.code === 0) {
              if (type === 0) {
                then.articleInfo.articleCountFlag.likeNumFlag = !flag
              } else if (type === 1) {
                then.articleInfo.articleCountFlag.shareNumFlag = !flag
              } else {
                then.articleInfo.articleCountFlag.collectNumFlag = !flag
              }
              then.initData()
            } else {
              Toast.fail(req.msg)
            }
          })
          .catch(function (error) {
            console.log(error)
            Toast.fail(failMessage)
          })
      } else {
        requestApi
          .post(
            'addArticlePopularity',
            {
              articleInfoId: parseInt(then.id),
              endorseType: type
            },
            {
              headers: {
                // 设置请求头
                Authorization: token
              }
            }
          )
          .then(response => {
            const req = response.data
            if (req.code === 0) {
              if (type === 0) {
                then.articleInfo.articleCountFlag.likeNumFlag = !flag
              } else if (type === 1) {
                then.articleInfo.articleCountFlag.shareNumFlag = !flag
              } else {
                then.articleInfo.articleCountFlag.collectNumFlag = !flag
              }
              then.initData()
            } else {
              Toast.fail(req.msg)
            }
          })
          .catch(function (error) {
            console.log(error)
            Toast.fail(failMessage)
          })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.head {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 10vh; /* 可根据需要设置容器的高度 */
}
.article-title {
  font-size: 28px;
  word-wrap: break-word;
  color: #222226;
  font-weight: 600;
  margin: 0;
  word-break: break-all;
  /* 文字阴影效果 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  /* 文字下划线效果 */
  text-decoration: underline;
  /* 文字加粗效果 */
  font-weight: bold;

  /* 文字大小写转换效果 */
  text-transform: uppercase;
}

.down {
  border: 2px solid #0ec0d7; /* 添加边框 */
  border-radius: 10px; /* 添加圆角边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加黑色阴影效果 */
  padding: 12px; /* 添加内边距 */
  margin: 0 20px; /* 调整左右边缘距离 */
}

.article-bar-top {
  color: #999aaa;
  border: 2px solid #333; /* 添加边框 */
  border-radius: 10px; /* 添加圆角边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加黑色阴影效果 */
  background-color: #f5f5f5; /* 设置背景颜色 */
  padding: 12px; /* 添加内边距 */
  margin: 0 20px; /* 调整左右边缘距离 */
}
</style>
